import styles from './index.module.scss'
import { NavBar, Form, Input, List, Button, Toast } from 'antd-mobile'
import { useHistory, useLocation } from 'react-router'
import { LoginForm } from '@/types/data'
import { useDispatch } from 'react-redux'
import { codeActionCreate, loginActionCreate } from '@/store/actions/login'
import { AxiosError } from 'axios'
import { ApiResponse } from '@/types/data'
import { useEffect, useRef, useState } from 'react'
// 这是input组件的类型(内置的)
import { InputRef } from 'antd-mobile/es/components/input'
// import { FormInstance } from 'antd-mobile/es/components/form'

export default function Login() {
  const history = useHistory()
  const dispatch = useDispatch()
  const location = useLocation<{ from: string }>()
  console.log('location', location)

  // todo 点击登录
  const onFinish = async (values: LoginForm) => {
    // 提交表单且数据验证成功后触发
    console.log(values) // 获取有效的表单数据

    try {
      // 发登录请求 (通用验证码246810)
      await dispatch(loginActionCreate(values))

      // 请求成功后, 提示用户, 再跳转
      Toast.show({
        content: '登录成功!!!',
        icon: 'success',
        duration: 1000,
        afterClose: () => {
          // 提示关闭后关闭
          // history.push('/home')

          //判断 如果state.from   说明你是被迫来的, 将来登录后要回去; 否则 正常回到首页
          if (location.state) {
            // login 这次访问记录被覆盖了
            history.replace(location.state.from)
          } else {
            history.push('/home')
          }
        },
      })
    } catch (e) {
      console.log(e)
      // 失败了 给提示
      const error = e as AxiosError<ApiResponse>
      console.log('error.response', error.response?.data.message)

      // 已经在拦截器中进行统一的配置
      // Toast.show({
      //   content: error.response?.data.message,
      //   icon: 'fail',
      //   duration: 1000,
      // })
    }
  }

  // 获取表单信息数组, 第一项就是表单ref
  const [form] = Form.useForm()
  // const formRef = useRef<FormInstance>(null)
  const inputRef = useRef<InputRef>(null)
  const [seconds, setSeconds] = useState(0)
  const timeId = useRef(-1)

  useEffect(() => {
    // 只要seconds变化, 就会执行副作用函数
    if (seconds <= 0) {
      // 描述 <= 0 ,清楚定时器
      clearInterval(timeId.current)
    }
  }, [seconds])

  useEffect(() => {
    // 副作用函数  didmount
    return () => {
      // 清理函数, 组件卸载的时候卸载定时器 willUnmount
      clearInterval(timeId.current)
    }
  }, [])

  //todo 发送验证码逻辑
  const sendCode = async () => {
    // 如果当前处在但即使期间, 什么都不处理
    if (seconds > 0) return

    // 校验手机号
    console.log(
      "form.getFieldValue('mobile')",
      form.getFieldValue('mobile'),
      form.getFieldError('mobile')
    )

    const mobile = form.getFieldValue('mobile') // 获取手机号
    // const mobile = formRef.current!.getFieldValue('moblie') // 获取手机号

    const mobileError = form.getFieldError('mobile') // 获取手机号校验错误信息数组
    console.log('mobile', mobile, mobileError)

    if (mobileError.length > 0) {
      // 手机号有问题
      // 需求: 如果有问题手机号输入框 自动聚焦
      console.log('有问题')
      return inputRef.current!.focus()
    }

    // 发请求, 发验证码...
    // dispatch 异步action 异步函数 => 抽离封装
    await dispatch(codeActionCreate(mobile))

    //todo 倒计时(1.初始化秒数, 2. 开启定时器 --)
    setSeconds(60)

    timeId.current = window.setInterval(() => {
      // 修改状态: 1. 直接赋值 2. 给一个回调, 函数返回只就是最新状态
      // 两者区别: 这边需要获取上一次的seconds 而不是默认值
      setSeconds((s) => {
        return s - 1
      })
    }, 1000)
  }

  return (
    <div className={styles.root}>
      <NavBar onBack={() => history.go(-1)}></NavBar>

      {/* 表单 */}
      <div className="login-form">
        <h2 className="title">账号登录</h2>

        <Form form={form} onFinish={onFinish}>
          <Form.Item
            className="login-item"
            name="mobile"
            validateTrigger={['onChange', 'onBlur']}
            rules={[
              { required: true, message: '手机号不能为空' },
              { pattern: /^1[3-9]\d{9}$/, message: '手机号格式错误' },
            ]}
          >
            <Input placeholder="请输入用户名" ref={inputRef}></Input>
          </Form.Item>

          {/* list组件可以将两个小结构放在一行 */}
          <List.Item
            className="login-code-extra"
            extra={
              <span className="code-extra" onClick={sendCode}>
                {seconds === 0 ? '发送验证码' : `${seconds}秒后发送`}
              </span>
            }
          >
            <Form.Item
              className="login-item"
              name="code"
              validateTrigger={['onChange', 'onBlur']}
              rules={[
                { required: true, message: '验证码不能为空' },
                { pattern: /^\d{6}$/, message: '验证码格式错误' },
              ]}
            >
              <Input placeholder="请输入验证码"></Input>
            </Form.Item>
          </List.Item>

          <Form.Item>
            <Button
              type="submit"
              color="primary"
              block
              className="login-submit"
            >
              登录
            </Button>
          </Form.Item>
        </Form>
      </div>
    </div>
  )
}
